<template>
	<view>
		<view class="start2">
			<view class="con">
				<!-- 			<view class="tip_text">
					<view class="txt1">请完善资料</view>
					 <view class="txt2">会让大家更想认识你！</view>
				</view> -->

				<button class="user_hd" v-if="!HeadImgUrl" hover-class="none" @click="iscro = true">
					<image :class="isHeadImgUrl ? 'redborder' : ''" class="icon"
						src="https://appapi.wavestation.cn/Data/Img/default_head.png" mode="widthFix" />
					<image class="cimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17134979213041479.png"
						mode="widthFix"></image>
				</button>
				<button class="user_hd" v-else hover-class="none" @click="iscro = true">
					<image class="hd_img" :src="HeadImgUrl" mode="aspectFill" />
				</button>

				<view class="input_box">
					<view class="titlebox">
						<text class="must">*</text>
						<text class="username">昵称</text>
					</view>

					<input :class="isName ? 'redborder' : ''" type="nickname" v-model="Name" placeholder-class="placename"
						placeholder="最多10个字" maxlength="10">
				</view>
				
				<view class="input_box" @click="showTimetype=true">
					<view class="titlebox">
						<text class="must">*</text>
						<text class="username">年龄</text>
					</view>
				
					<input disabled type="nickname" v-model="DateStr" placeholder-class="placename"
						placeholder="请选择年龄" maxlength="10">
				</view>
				<!-- <view class="group" @click="showBirthday = true">
					<view class="lab">生日</view>
					<view class="inp_box">
						<input type="text" v-model="Birthday" disabled placeholder="选择生日" />
					</view>
					<view class="icon_box"><uni-icons type="right" size="18" color="#E7E7E7"></uni-icons></view>
				</view> -->
				<view class="input_box">
					<view class="titlebox">
						<text class="must">*</text>
						<text class="username">请选择性别(设置后不可更改)</text>
					</view>
					<view class="sexbox">
						<view class="sextitle" :class="{ 'tab4': sexnum == 0 }" @click="checkSexChange(0)">
							<image class="seximg"
								src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713504752895497.png"></image>
							<text class="man" :class="{ 'text4': sexnum == 0 }">男</text>
						</view>
						<view class="sextitle" :class="{ 'tab4': sexnum == 1 }" @click="checkSexChange(1)">
							<image class="seximg"
								src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1713504766833808.png"></image>
							<text class="man" :class="{ 'text4': sexnum == 1 }">女</text>
						</view>
					</view>
					<!-- <radio-group v-model='Sex' @change="checkSexChange" class="checkbox-class">
						<label>
							<radio value="男" />男
							<radio class="item_e" value="女" />女
						</label>
					</radio-group> -->
				</view>
			</view>
		</view>
		<view class="start5">
			<view class="con">
				<view class="text1">
					<text class="must">*</text>
					<text class="text1">最喜欢的运动</text>
				</view>
				<view class="tag_body">
					<view class="tag_cell " :class="tagIndex==index?'tag_active':''" v-for="(item,index) in componentList" :key="index" @click="checkTag(item,index)">
						{{item.Tag}}
					</view>
				</view>
			</view>
		</view>
	
		<view class="start5">
			<view class="con">
				<view class="text1">
					<text class="must">*</text>
					<text class="text1">请上传1-3张运动照片</text>
				</view>
				<view class="imglistbox">
					<view class="imglist">
						<view class="item_box" v-for="(item, index) in images" :key="index">
							<image :src="item" mode="aspectFill" />
							<view class="del_con" @click="delImg(index)">
								<uni-icons type="closeempty" color="#fff" size="16"></uni-icons>
							</view>
						</view>
						<view class="item_box" @click="selectImg" v-if="images.length < 3">
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17117084387991289.png"
								mode="aspectFill" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="start5">

			<view class="con">
				<!-- <view class="input_box" >
					<view class="titlebox">
						<text class="username">微信号(选填)</text>
					</view>
					
					<input  type="text" v-model="WechatNo" placeholder-class="placename" placeholder="请填写您的微信号" maxlength="30">
				</view> -->
				<!-- <block v-if="!is_have_pid">
					<view class="searbox">
						<view class="text1"> 推荐人（选填）</view>
						<view class="input_box">
							<input type="text" v-model="RecommendName" placeholder-class="placerec" disabled placeholder="请填写您的推荐人" @click="openSearchUserWin()">
						</view>
					</view>
					
				</block>
				<view class="text1"> 从哪知晓我们动魅（选填）</view>
				<view class="in_box">
					<radio-group  class="checkbox-class">
						<view style="display: flex;" v-for="(item,index) in adChannelList" :key="index">
							<radio color="#0D0D0D"  :checked="item.id==radioValue"  @click="checkboxChange(item)" />
							<view class="name">{{item.name}}</view>
						</view>
					</radio-group>
				</view> -->
			</view>
		</view>
		<view class="btn3" @click="sub">
			下一步
		</view>
		<!-- <view class="btn3" @click="nav_to('/pages/start/skitype')">
			下一步
		</view> -->
		<view style="height: 92rpx;"></view>
		<!-- <view class="pre_step" @click="back_to()">返 回</view> -->
		<uni-popup ref="search_user" type="bottom">
			<view class="popupbox">
				<view class="title">
					搜索推荐人
				</view>
				<view class="sear">
					<input type="text" v-model="searVal" placeholder="昵称/手机号/ID号" @confirm="searchUser" />
					<view class="icon" @click="searchUser">
						<image src="@/static/img/search.png" mode=""></image>
					</view>
				</view>
				<scroll-view class="scroll" scroll-y>
					<view v-if="Array.isArray(userArr) && userArr.length > 0">
						<view class="item" v-for="item in userArr" :key="item.ID" @click="selectUser(item)">
							<view class="cover">
								<image :src="item.HeadImgUrl" mode="aspectFill" />
							</view>
							<view class="name">
								{{ item.Name || "匿名" }}
								<view class="member member_he" v-if="getUserType(item.UserType) == 1">黑卡</view>
								<view class="member member_he" v-if="getUserType(item.UserType) == 2">黑金卡</view>
								<view class="member number_huan" v-if="getUserType(item.UserType) == 3">金卡</view>
							</view>
						</view>
					</view>
					<view class="item" v-else
						style="height: 100%;display: flex;align-items: center;justify-content: center;">
						暂无该会员信息
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<u-datetime-picker immediateChange ref="datetimePicker" @cancel="showBirthday = false" :show="showBirthday"
			:minDate="minDate" :maxDate="maxDate" mode="date" v-model="nowDate"
			@confirm="setBirthday"></u-datetime-picker>
		<u-picker :show="showTimetype" immediateChange @confirm="setTimeType" @cancel="showTimetype = false"
				:columns="timetype"></u-picker>
		<qfimagecropper :zIndex="99" v-if="iscro" :width="666" :height="666" @crop="cropView"></qfimagecropper>
	</view>
</template>

<script>
import qfimagecropper from "@/pages/start/components/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue"
export default {
	components: {
		qfimagecropper
	},
	data() {
		let d = new Date('1923/1/1');
		let nowD = new Date().getTime();
		return {
			iscro: false,
			isHeadImgUrl: false,
			isName: false,
			Birthday: '',
			minDate: d.getTime(),
			maxDate: nowD,
			nowDate: nowD,
			showBirthday: false,
			sexnum: 0,
			radioValue: null,
			HeadImgUrl: '',
			Name: '',
			WechatNo: '',
			Sex: '男',
			comData: {
				Content: "",
				Images: "",
				CompanyID: 6002,
				CatalogID: 0,
				Title: "",
				IsVideo: 0
			},
			localList: [],
			images: [],
			City: '',
			Province: '',
			PID: 0,
			RecommendName: '',
			AdChannel: '',

			searVal: '',
			userArr: [],
			is_have_pid: false,

			checkedList: [],
			adChannelList: [{
				id: '1',
				name: '微信'
			},
			{
				id: '2',
				name: '抖音'
			},
			{
				id: '3',
				name: '小红书'
			},
			{
				id: '4',
				name: '其他'
			}
			],
			componentList:[],
			tagIndex:-1,
			tagText:'',
			showTimetype:false,
			timetype:[['70后','80后','90后','00后','05后']],
			DateStr:''
		};
	},
	async onLoad() {
		let res = await this.$api.post('/Common/Add_ViewPath', {
			Path: 'start2',
			Platform: uni.getStorageSync('platform')
		});

		this.PID = uni.getStorageSync('user').PID;

		console.log('PID===' + this.PID);

		if (this.PID > 0) {
			this.is_have_pid = true;
		}

		await this.getCity();
		this.GetMemberTag()
		uni.$on('iscro', async data => {
			this.iscro = data
		})

	},
	onUnload() {
		uni.$off("iscro");
	},
	watch: {
		Name() {
			this.isName = false
		},
		HeadImgUrl() {
			this.isHeadImgUrl = false
		}

	},
	methods: {
		setTimeType(e){
		  this.showTimetype = false
		  this.DateStr = e.value[0]
		},
		checkTag(item,index){
			this.tagIndex = index
			this.tagText = item.Tag
		},
		async GetMemberTag() {
			let res = await this.$api.post('Member/GetMemberTag', {
				PageIndex: 1,
				PageSize: 50
			});
			this.componentList = res.data
		},
		async setBirthday(e) {
			console.log(e.value);
			this.Birthday = await uni.$u.date(e.value, 'yyyy-mm-dd');
			this.showBirthday = false;
		},
		checkboxChange(item) {
			if (this.radioValue == item.id) {
				this.radioValue = null
			} else {
				this.radioValue = item.id
			}

		},
		checkSexChange(i) {
			this.sexnum = i;
			console.log(this.sexnum);
			if (i == 0) {
				this.Sex = '男';
			} else {
				this.Sex = '女';
			}

		},
		openSearchUserWin() {
			this.$refs.search_user.open()
		},
		async searchUser() {

			let user_res = await this.$api.post('/Member/Search', {
				Name: this.searVal
			});

			this.userArr = user_res.data;
		},
		selectUser(item) {

			this.PID = item.ID;
			this.RecommendName = item.Name;

			this.$refs.search_user.close()
		},
		delImg(index) {

			this.images.splice(index, 1);
		},

		getLocationSysc() {
			let _this = this;
			return new Promise((resolve, reject) => {
				uni.getLocation({
					type: 'gcj02',
					success: function (res) {
						resolve(res);
					},
					fail: function (err) {
						const defaultLocation = {
							latitude: 0,
							longitude: 0
						};
						resolve(defaultLocation);
					}
				});
			});
		},

		async getCity() {
			let loc = await this.getLocationSysc();
			let longitude = loc.longitude;
			this.longitude = loc.longitude;
			let latitude = loc.latitude;
			this.latitude = loc.latitude;
			let o = {
				longitude,
				latitude
			};
			let res = await this.$util.getAddress(o);

			this.Province = res.result.address_component.province;
			this.City = res.result.address_component.city;

		},

		async sub() {

			if (!this.HeadImgUrl) {
				this.isHeadImgUrl = true
				this.$pv.msg('请上传头像');
				return;
			}

			if (!this.Name) {
				this.isName = true
				this.$pv.msg('请输入昵称');
				return;
			}
			if (!this.DateStr) {
				this.$pv.msg('您还未选择年龄');
				return;
			}
			// if(!this.WechatNo){
			// 	this.$pv.msg('请输入微信号');
			// 	return;
			// }
			if (!this.Sex) {
				this.$pv.msg('请选择性别');
				return;
			}
			if (!this.tagText) {
				this.$pv.msg('您还未选择最喜欢的运动');
				return;
			}

			if (this.localList.length == 0) {
				this.$pv.msg('您还未上传1~3运动照片!');
				return;
			}
			
			

			// let res = await this.$api.post('/Member/Create', {
			let utfname = this.$util.utf16ToEntities(this.Name)
			const data = {
				Sex: this.Sex,
				Province: this.Province,
				City: this.City,
				VideoUrl: '',
				IsVideo: 0,
				HeadImgUrl: this.HeadImgUrl,
				UserImgs: this.HeadImgUrl,
				Descript: '',
				Phone: '',
				IDCard: '',
				TrueName: '',
				Name: utfname,
				WechatNo: this.WechatNo,
				Height: 0,
				Weight: 0,
				Income: 0,
				IsMemberShow: 1,
				PID: this.PID,
				AdChannel: this.AdChannel,
				Birthday: this.Birthday,
				localList: this.localList,
				AgeLevel:this.DateStr,
				SportName:this.tagText
			}
			this.$store.commit('setSign', data);
			this.nav_to('/pages/start/skitype')
			return
			let res = await this.$api.post('/Member/CreateV2', data);
			uni.setStorageSync('xj_token', res.data.Token);

			let user = res.data.UserData;

			uni.setStorageSync('user', user);
			this.$store.commit('setUser', user);
			this.nav_to('/pages/start/skitype')
			//自动发布一条动态
			this.comData.Images = JSON.stringify(this.localList.map(item => {
				return item.netPath
			}))

			this.comData.Content = '';
			await this.$api.post('Community/UserShare', this.comData);
			this.$im.updateUserAvatarUrl(this.HeadImgUrl);
			this.$im.updateUserName(this.Name);

		},
		async cropView(e) {
			//   console.log(e, "eeeeeeeeeeee");
			let _this = this;
			let o = {
				ID: "",
				duration: 0,
				fileType: "image",
				tempUrl: e.tempFilePath,
				flieUrl: e.tempFilePath,
				tempKey: uni.$u.guid(8),
				pro: 0,
				netPath: "",
			};

			let r = await _this.uploadingList(
				o.flieUrl,
				o.tempKey,
				new Date().getTime() - 500
			);
			_this.HeadImgUrl = r;
			_this.isHeader = true;
		},
		async chooseavatar(e) {
			try {

				let _this = this;
				uni.chooseImage({
					count: 1, //默认9
					mediaType: ['image'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: async function (res) {

						let o = {
							ID: "",
							duration: 0,
							fileType: 'image',
							tempUrl: res.tempFiles[0].path,
							flieUrl: res.tempFiles[0].path,
							tempKey: uni.$u.guid(8),
							pro: 0,
							netPath: "",
						};

						let r = await _this.uploadingList(o.flieUrl, o.tempKey,
							new Date().getTime() - 500);
						_this.HeadImgUrl = r;
						_this.isHeader = true;
					}
				})
			} catch (error) {
				this.$pv.msg('图片上传失败');
				console.log(error);
			}
		},

		selectImg(index) {
			let ind = index >= 0 ? index : -1;
			let _this = this;
			let con;
			let mediaType = ['image'];

			con = 3 - this.images.length;

			uni.chooseImage({
				count: con,
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				success(res) {

					res.tempFiles.forEach(async (item, index) => {
						let o;

						o = {
							ID: "",
							duration: 0,
							fileType: 'image',
							tempUrl: item.path,
							flieUrl: item.path,
							tempKey: uni.$u.guid(8),
							pro: 0,
							netPath: "",
						};

						if (ind == -1) {
							_this.localList.push(o);
						} else {
							_this.localList.splice(ind, 1, o);
						}
						setTimeout(async () => {
							let r = await _this.uploadingList(o.flieUrl, o.tempKey,
								new Date().getTime() - index * 500);
							console.log(r)
							_this.images.push(r);

						}, index * 150)

					});
				}
			});

		},

		async uploadingList(url, tempKey, timeStamp) {
			this.$pv.load('正在上传');
			const r = await this.$upload(url, pro => {
				this.localList.forEach((item) => {
					if (item.tempKey == tempKey) {
						item.pro = pro;
					}
				});
			})
			this.localList.forEach(item => {
				if (item.tempKey == tempKey) {
					item.netPath = r;
				}
			});
			this.$pv.closeLoad('')
			this.iscro = false
			return r;
		},

	},
	computed: {
		getUserType(l) {
			return l => {
				if (l.indexOf('黑金年') != -1) {
					return 1
				} else if (l.indexOf('黑金') != -1) {
					return 2
				} else if (l.indexOf('金') != -1) {
					return 3
				} else {
					return 0
				}
			}
		},
		checkedValue() {
			if (this.checkedList.length > 0) {
				const selectedItem = this.adChannelList.find((item) => item.id === this.checkedList[0]);

				if (selectedItem) {
					return `当前选中项为：${selectedItem.name}`;
				} else {
					return '';
				}
			} else {
				return '';
			}
		},
	}
};
</script>

<style lang="scss">
page {
	background: #ffffff;
}

.group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	margin: 30rpx 0;

	&::after {
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		height: 2rpx;
		content: '';
		transform: scaleY(.6);
		background-color: #E4E4E4;
	}

	.inp_box {
		flex: 1;
		display: flex;
		align-items: center;
		flex-direction: row;

		input {
			width: 100%;
			text-align: right;
			color: #999999;
			font-size: 32rpx;
		}

		.radio_s {
			display: flex !important;
			height: 100rpx;
		}

		.item_check {
			padding: 10rpx;
			display: flex;
			flex-direction: row;

			.desc {
				color: #000 !important;
			}
		}
	}

	.icon_box {
		height: 40rpx;
		width: 40rpx;
		line-height: 40rpx;
	}

	.inp_append {
		margin-left: 8rpx;
	}

	.s_btn {
		color: #fff;
		font-size: 24rpx;
		width: 170rpx !important;
		height: 60rpx !important;
		border-radius: 5rpx;
		background-color: #0D0D0D;
		margin: 0 0 0 20rpx;
	}

}

.uni-popup {
	z-index: 9999 !important;
}

button::after {
	border-radius: 0 !important;
	border: 0 !important;
}

.tab4 {
	background-color: #0D0D0D !important;
}

.text4 {
	color: #fff !important;
}

.placerec {
	color: #999999;
	font-size: 32rpx;
	// text-align: right;
}

.placename {
	color: #999999;
	font-size: 32rpx;
	font-weight: 500;
	// text-align: right;
}

.must {
	font-size: 32rpx;
	color: #EF4034;
}

.titlebox {
	display: flex;
	align-items: center;

	.must {
		font-size: 32rpx;
		color: #EF4034;
	}

	.username {
		font-size: 28rpx;
		color: #999999;
		margin-bottom: 10rpx;
	}
}

.con {
	width: 640rpx;
}

.des {
	margin-top: 20rpx;
	line-height: 50rpx;
	text-align: center;
}

.start2 {
	// height: 400rpx;
	width: 100vw;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pre_step {
	width: 100%;
	text-align: center;
	line-height: 120rpx;
	color: #767676;
}

.btn3 {
	margin: 0 auto;
	margin-top: 64rpx;
	width: 670rpx;
	height: 92rpx;
	background: #0D0D0D;
	display: flex;
	border-radius: 44rpx;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-size: 32rpx;
}

.start5 {
	margin-top: 25rpx;
	display: flex;
	align-items: center;

	.con {
		width: 100%;
		box-sizing: border-box;
		padding-left: 50rpx;
		padding-right: 50rpx;

		.searbox {
			// display: flex;
			// border-bottom: 1rpx solid #999999;
			align-items: center;
		}
	}

	.text1 {
		font-size: 28rpx;
		color: #999999;
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
	}
	.tag_body{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.tag_cell{
			width: 138rpx;
			height: 72rpx;
			border-radius: 8rpx;
			background-color: #f7f7f7;
			text-align: center;
			line-height: 72rpx;
			color: #333333;
			font-size: 28rpx;
			margin-right: 24rpx;
			margin-bottom: 24rpx;
		}
		.tag_active{
			background-color: #000;
			color: #fff;
		}
	}

	.imglistbox {
		width: 590rpx;
		border-radius: 16rpx;
		box-sizing: border-box;

		.imglist {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 542rpx;
			flex-wrap: wrap;

			&::after {
				content: "";
				height: 1px;
				width: 33%;
				display: flex;
			}
		}

		.item_box {
			position: relative;
			background-color: #e2e2e2;
			height: 172rpx;
			width: 172rpx;
		}

		image {
			width: 172rpx;
			height: 172rpx;
			// background: #0f0;
		}
	}

	.pre_step {
		width: 100%;
		text-align: center;
		line-height: 120rpx;
		color: #767676;
	}

	.btn1 {
		margin-top: 64rpx;
		width: 590rpx;
		height: 96rpx;
		background: linear-gradient(225deg, #e2e2e2 0%, #b8b8b8 100%);
		box-shadow: 0px 8px 20px 0px rgba(46, 46, 46, 0.4);
		display: flex;
		border-radius: 12rpx;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 36rpx;
	}

	.text3 {
		margin-top: 48rpx;
		color: #9d9d9d;
		font-size: 40rpx;
		line-height: 56rpx;
	}

	.video_box {
		position: relative;
		margin-top: 38rpx;
		;
		width: 590rpx;
		height: 360rpx;

		video {
			width: 590rpx;
			height: 360rpx;
		}
	}


	.del_con {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 50;
		background: rgba(0, 0, 0, 0.4);
		height: 40rpx;
		width: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 0 16rpx 0 16rpx;
	}
}

.tip_text {
	position: relative;
	height: 160rpx;

	.txt1 {
		height: 80rpx;
		font-size: 64rpx;
		color: #0a0a0a;
	}

	.txt2 {
		position: absolute;
		width: 700rpx;
		height: 80rpx;
		font-size: 64rpx;
		color: #0a0a0a;
	}
}

.user_hd {
	margin-top: 28rpx;
	margin-left: auto;
	margin-right: auto;
	width: 200rpx;
	height: 200rpx;
	background: #f6f6f6;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: visible !important;

	.redborder {
		border: 1rpx solid red;
		border-radius: 50%;
	}

	.icon {
		height: 200rpx;
		width: 200rpx;
	}

	.cimg {
		width: 52rpx;
		height: 52rpx;
		position: absolute;
		right: 10rpx;
		bottom: 0;
	}

	.hd_img {
		height: 100%;
		width: 100%;
		border-radius: 50%;
	}
}

.input_box {
	margin-bottom: 20rpx;

	.redborder {
		border: 1rpx solid red;
	}

	.sexbox {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.sextitle {
			width: 292rpx;
			height: 96rpx;
			background-color: #f6f6f6;
			text-align: center;
			line-height: 96rpx;
			border-radius: 16rpx;

			.seximg {
				width: 40rpx;
				height: 40rpx;
				vertical-align: middle;
				margin-right: 8rpx;
			}

			.man {
				font-size: 32rpx;
				color: #333333;
			}
		}
	}

	input {
		height: 80rpx;
		line-height: 80rpx;
		color: #000;
		// text-align: right;
		border: 1rpx solid #E4E4E4;
		box-sizing: border-box;
		padding: 0 36rpx;
	}

	.checkbox-class {
		height: 80rpx;
		line-height: 80rpx;
		color: #333333;

		.item_e {
			margin-left: 32rpx;
		}
	}

	checkbox {
		height: 70rpx;
		line-height: 70rpx;
		color: #000;
	}

	.input-placeholder,
	.textarea-placeholder {
		color: #999;
	}
}

.in_box {
	margin-top: 5rpx;
	//height: 80rpx;
	//line-height: 80rpx;
	//text-align: center;

	input {
		height: 70rpx;
		line-height: 70rpx;
		color: #000;
	}

	.checkbox-class {
		// height: 210rpx;
		line-height: 60rpx;
		color: #000;
		display: flex;
		justify-content: space-between;

		.name {
			font-size: 28rpx;
		}
	}

	checkbox {
		height: 70rpx;
		line-height: 70rpx;
		color: #000;
	}

	.input-placeholder,
	.textarea-placeholder {
		color: #999;
	}
}

.btn1 {
	margin-top: 54rpx;
	width: 590rpx;
	height: 100rpx;
	background: linear-gradient(225deg, #020202 0%, #363636 100%);
	box-shadow: 0px 4rpx 16rpx 0px rgba(46, 46, 46, 0.4);
	border-radius: 12rpx;
	opacity: 0.9;
	color: #fff;
	font-size: 36rpx;
	line-height: 100rpx;
}

.btn2 {
	line-height: 100rpx;
	margin-top: 32rpx;
	width: 590rpx;
	height: 100rpx;
	box-shadow: 0px 4rpx 16rpx 0px rgba(46, 46, 46, 0.4);
	border-radius: 12rpx;
	border: 1px solid #0a0a0a;
	background: #fff;
	box-sizing: border-box;
}

.popupbox {
	background-color: #fff;
	border-top-left-radius: 26rpx;
	border-top-right-radius: 26rpx;
	padding: 20rpx 32rpx;
	padding-bottom: 70rpx;

	.title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
		color: #6f6f6f;
	}

	.sear {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 8rpx #ccc;

		.icon {
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			image {
				width: 34rpx;
				height: 34rpx;
			}
		}

		input {
			color: #6f6f6f;
			padding: 10rpx 10rpx 10rpx 20rpx;
			flex: 1;
		}
	}

	.scroll {
		width: 100%;
		height: 30vh;
		box-sizing: border-box;

		.item {
			display: flex;
			padding: 20rpx 0;
			height: 100rpx;

			border-bottom: 2rpx solid #eee;

			.cover {
				height: 100rpx;
				width: 100rpx;
				border-radius: 50%;
				overflow: hidden;
				border: 1px solid #333;

				image {

					height: 100%;
					width: 100%;
				}
			}

			.name {
				color: #6f6f6f;
				line-height: 52px;
				height: 52rpx;
				padding: 0rpx 0 0 20rpx;

				.member {
					display: inline-block;
					width: 68rpx;
					height: 32rpx;
					background: linear-gradient(135deg, #7E7E7E 0%, #292929 100%);
					border-radius: 2px;
					border: 2px solid #D6C6AB;
					text-align: center;
					color: #fff;
					font-size: 16rpx;
					line-height: 32rpx;
					margin-left: 20rpx;
				}

				.number_huan {
					color: #4C310C;
					background: linear-gradient(180deg, #FDF9F6 0%, #E1C4A6 100%);
					border: 2rpx solid #E6CEB5;
				}
			}

		}

		.item:last-child {
			border: 0;
		}

		.item:first-child {
			padding-top: 0;
		}
	}
}
</style>